
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.loading{position: absolute;top: 0;bottom: 0;left: 0;right: 0;z-index: 999999;background: rgba(0,0,0,.3);}
.loadingbox{width: 8rem;height: 8rem;border-radius: 8px;background: rgba(0,0,0,.7);position: absolute;top: 50%;left: 50%;margin: -4rem 0 0 -4rem;text-align: center;line-height: 8rem;color: #fff;font-size: 1.2rem;}


/*help ´óÍ·Íø www.datouwang.com */
.help{
    width: 30px;
    height: 30px;
    border: 1px #fff solid;
    border-radius: 50%;
    -webkit-animation: rotation 1s ease-in-out infinite;
       -moz-animation: rotation 1s ease-in-out infinite;
            animation: rotation 1s ease-in-out infinite;
    margin: 34% auto;
}
.help:after{
    width: 5px;
    height: 5px;
    background-color: rgba(255,255,255,1);
    border-radius: 100%;
    position: absolute;
    content: "";
}
@-webkit-keyframes rotation{
    0%{-webkit-transform: rotate(0deg);}
    100%{-webkit-transform: rotate(360deg);}
}
@-moz-keyframes rotation{
    0%{-moz-transform: rotate(0deg);}
    100%{-moz-transform: rotate(360deg);}
}
@keyframes rotation{
    0%{transform: rotate(0deg);}
    100%{transform: rotate(360deg);}
}

</style>


<template>
  <div class="loading" v-if="$store.state.loadingbox">
    <div class="loadingbox">
        <div class="help"></div>
    </div>

  </div>
</template>

<script>
export default {
  data () {
    return {
        loadingbox:false
    }
  },
  created(){
   
  },
   methods:{
      
}
}
</script>